import { pageRecord } from '@/services/api/api-pressconference';
import { parse } from '@/utils/historyUtils';
import { ReloadOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { ProFormInstance } from '@ant-design/pro-form';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Button, Space, Tag, Typography } from 'antd';
import Search from 'antd/es/input/Search';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';
import TreeAddress from '../address/TreeAddress';
import AddRecord from '../record/AddRecord';
import DetailsRecord from '../record/DetailsRecord';

interface PagePressconferenceProps {
  brainType?: string;
}

const PagePressconference: React.FC<PagePressconferenceProps> = ({ brainType }) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const [combineId, setCombineId] = useState();

  const [instructId, setInstructIdState] = useState('');

  const [search, setSearch] = useState({
    name: '',
  });

  const columns: ProColumns<PressconferenceData.RecordPage>[] = [
    {
      title: '回执情况',
      dataIndex: 'isView',
      key: 'isView',
      hideInSearch: access.新闻发布x配置x管理员,
      hideInTable: access.新闻发布x配置x管理员,
      valueType: 'select',
      align: 'center',
      width: '80px',
      valueEnum: {
        0: { text: '未阅读' },
        1: { text: '已阅读' },
      },
      render: (_, record) => (
        <Space>
          <Tag color={record.isView === 0 ? '#F9CF59' : '#1AA15F'} key="recordExamineType">
            {record.isView === 0 ? '未阅读' : '已阅读'}
          </Tag>
          <Tag color={record.isReply === 0 ? '#F9CF59' : '#1AA15F'} key="recordExamineType">
            {record.isReply === 0 ? '未回复' : '已回复'}
          </Tag>
        </Space>
      ),
    },
    {
      title: '标题',
      dataIndex: 'name',
      key: 'name',
      width: '300px',
      align: 'center',
      ellipsis: true,
      render: (dom, record, _index, action) => {
        return (
          <div
            style={{
              textAlign: 'left',
            }}
          >
            <DetailsRecord
              item={record}
              onClose={function (): void {
                actionRef.current?.reload();
              }}
            />
          </div>
        );
      },
    },
    {
      title: '发布单位',
      dataIndex: 'createdOrganizationAvatar',
      key: 'createdOrganizationAvatar',
      valueType: 'avatar',
      width: '100px',
      align: 'center',
      search: false,
      render: (dom, record) => {
        return (
          <Typography.Text ellipsis={true} type="secondary">
            <span>{dom}</span>
            {record.createdOrganizationName}
          </Typography.Text>
        );
      },
    },
    {
      title: '发布人',
      dataIndex: 'createdAccountName',
      key: 'createdAccountName',
      hideInSearch: true,
      width: '80px',
      align: 'center',
    },
    {
      title: '截止日期',
      dataIndex: 'deadlineTime',
      key: 'deadlineTime',
      width: '120px',
      align: 'center',
      search: false,
      render: (_, record) => (
        <span
          style={{
            color: record.run == 1 ? 'green' : 'red',
          }}
        >
          {record.deadlineTime}
        </span>
      ),
    },
    {
      title: '回执情况',
      hideInSearch: access.宣传指令x配置x接收者,
      hideInTable: access.宣传指令x配置x接收者,
      dataIndex: 'receipt',
      key: 'receipt',
      valueType: 'avatar',
      width: '80px',
      align: 'center',
      search: false,
    },
    {
      title: '发布日期',
      dataIndex: 'createdTime',
      key: 'createdTime',
      width: '120px',
      align: 'center',
      search: false,
    },
  ];

  useEffect(() => {
    actionRef.current?.reloadAndRest();
  }, [brainType]);

  useEffect(() => {
    const { instructId } = parse(location.search) as { instructId: string };
    setInstructIdState(instructId);
  }, []);

  /**
   * 请求网络
   * @param value
   */
  const request = async (params = {}) => {
    const response = await pageRecord({ ...params, ...search });
    return Promise.resolve({
      data: response.data.data,
      total: response.data.total,
      success: response.code === 0,
    });
  };
  return (
    <PageContainer
      header={{
        title: (
          <Space align="center">
            <span>新闻发布</span>
            <Search
              placeholder="搜索"
              onSearch={(value) => {
                setSearch({
                  ...search,
                  name: value,
                });
                actionRef.current?.reloadAndRest();
              }}
              enterButton
            />
          </Space>
        ),
        style: {
          paddingBlockEnd: 0,
        },
      }}
      extra={[
        <Button type="primary" onClick={() => actionRef.current?.reload()}>
          <ReloadOutlined />
          刷新
        </Button>,
        access.新闻发布x配置x管理员 && (
          <TreeAddress
            key={'tree_address'}
            onSave={() => {
              actionRef.current?.reload();
            }}
          />
        ),
        access.新闻发布x配置x管理员 && (
          <AddRecord
            onSave={function (): void {
              actionRef.current?.reloadAndRest();
            }}
          />
        ),
      ]}
    >
      <ProTable<PressconferenceData.RecordPage>
        style={{
          marginTop: 10,
        }}
        headerTitle={<span>新闻发布</span>}
        ghost
        columns={columns}
        request={request}
        actionRef={actionRef}
        rowKey="id"
        dateFormatter="string"
        bordered
        search={false}
        sticky
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          defaultPageSize: 20,
        }}
        toolbar={{}}
        toolBarRender={false}
      />
    </PageContainer>
  );
};

export default PagePressconference;
